import React from 'react'
import './index.css'

export default function Footer({ todoList, setTodoList }) {

  // 计算已完成数量
  const calculationCompleted = () => {
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
  }

  // 全选
  const checkAll = (e) => {
    setTodoList(todoList.map(item => ({...item, done: e.target.checked})))
  }

  // 删除已完成
  const deleteCompleted = () => {
    setTodoList(todoList.filter(item => !item.done))
  }

  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={calculationCompleted() === todoList.length && todoList.length !== 0 ? true : false}
          onChange = {checkAll}
        />
      </label>
      <span>
        <span>已完成 {calculationCompleted()}</span> / 全部 {todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteCompleted}>清除已完成任务</button>
    </div>
  )
}
